<template>
  <div class="keep-alive">
    <h2>KeepAlive 组件</h2>
    <p>
      KeepAlive 是 Vue 3
      中的一个内置组件，用于缓存组件的状态，避免重复渲染。它可以提高性能，特别是在切换视图时。
    </p>
    <p>使用 KeepAlive 包裹需要缓存的组件，可以在切换时保留其状态，而不是重新创建。</p>
    <p>只能有一个子节点</p>
    <p>新增两个生命周期：onActivated()、onDeactivated()</p>
    <keep-alive :include="['AsyncContent', 'Composition']" exclude="UserProfile" max="10">
      <router-view />
    </keep-alive>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss"></style>
